<template>
  <div class="line-chart" ref="lineChart"></div>
</template>
<script>
import * as echarts from "echarts";
let Option = {
  color: ["#FC5453", "#0E35FF"],
  backgroundColor: "#1e2031",

  legend: {
    // data: ["完成任务数", "未完成任务数"],
    // formatter: n => {
    //   return n + "\n" + 12620;
    // },
    textStyle: {
      color: "##1E2031"
    }
  },
  tooltip: {
    trigger: "axis",
    textStyle: {
      color: "#fff"
    },
    backgroundColor: "rgba(0,0,0,.7)"
  },
  xAxis: {
    type: "category",
    splitLine: { show: true, lineStyle: { color: ["#2A2C3B"] } }
    // data: ["1", "2", "3", "4", "5", "6", "7"],
    // axisLabel: {
    //   formatter: "{value} 月"
    // }
  },
  yAxis: {
    splitLine: { show: true, lineStyle: { color: ["#2A2C3B"] } },
    type: "value"
    // axisLabel: {
    //   formatter: "{value} k"
    // }
  },
  series: [
    // {
    //   name: "完成任务数",
    //   data: [5, 2, 5, 5, 4, 5, 5],
    //   type: "line",
    //   smooth: true,
    //   lineStyle: { width: 5 },
    //   showSymbol: false
    // },
    // {
    //   name: "未完成任务数",
    //   data: [5, 2, 4, 8, 5, 8, 9],
    //   type: "line",
    //   smooth: true,
    //   lineStyle: { width: 5 },
    //   showSymbol: false
    // }
  ]
};
export default {
  name: "LineChart",
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted: function() {},
  methods: {
    buildChart(legend = [], xAxis = [], series = []) {
      let myChart = echarts.init(this.$refs["lineChart"]);
      Option.legend.data = legend;
      Option.xAxis.data = xAxis;
      let total = {};
      Option.series = series.map(r => {
        total[r.name] = eval(r.data.join("+"));
        return {
          ...r,
          lineStyle: { width: 5 },
          smooth: true,
          showSymbol: false
        };
      });
      (Option.legend.formatter = n => {
        return n + "\n" + total[n];
      }),
        myChart.setOption(Option);
    }
  }
};
</script>
<style lang="scss">
.line-chart {
  width: 100%;
  height: 300px;
}
</style>
